.drawer-container {
    width: 100%;
    height: 100%;
}

.drawer-menu {
    width: 100%;
    height: 100%;
    position: absolute;
}

.drawer-menu-background {
    width: 100%;
    height: 100%;
    background-color: #80000000;
}

.drawer-content {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: white;
}


.menu-layout {
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #f7f6fe;
    border-right: 1px solid #eeeded;
}

.my-info {
    flex-direction: column;
    width: 100%;
    height: 200px;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #eaeaea;
}

.my-info image {
    width: 100px;
    height: 100px;
}

.my-info text {
    color: #4c4c4c;
    font-size: 17px;
}

.menu-content {
    margin-top: 30px;
    flex-direction: column;
    width: 100%;
}

.menu-content div {
    width: 100%;
    flex-direction: row;
    align-items: center;
    padding-left: 15%;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 15px;
}
.menu-content div:active{
    background-color: #e4e3ea;
}

.menu-content image {
    width: 25px;
    height: 25px;
}

.menu-content text {
    color: #444444;
    margin-left: 15px;
    font-size: 18px;
}

.content-layout {
    width: 100%;
    flex-direction: column;
}

.title-bar {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #f3f3f3;
    justify-content: center;
    align-items: center;
}

.title-bar image {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 50px;
    height: 50px;
    padding: 8px;
    margin-left: 10px;
}

.title-bar text {
    font-size: 20px;
}

.mainpage-content {
    flex-direction: column;
    margin-top: 30px;
    padding: 30px;
}

.mainpage-content .title {
    font-size: 25px;
}

.mainpage-content .content1 {
    font-size: 20px;
    margin-top: 30px;
}

.mainpage-content .content {
    color: #244c21;
    font-size: 17px;
    letter-spacing: 2px;
    margin-top: 15px;
    margin-left: 30px;
}